<script lang="ts" setup>
import { getPackageDetailsApi } from '@/services/eat'
import { useMemberStore, usePhoneStore, useShoppingCartStore } from '@/stores'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

const phoneStore = usePhoneStore()
const shoppingCartStore = useShoppingCartStore()
// 获取id
let data = ref<any>()
const query = defineProps<{
  items: any
}>()
onLoad(() => {
  // console.log(JSON.parse(query.items))
  data.value = JSON.parse(decodeURIComponent(query.items)) // 对象传值进行解码
  // console.log(data.value)
  // 当购物车中有 套餐的时候，对比购物车中的套餐是否 是当前套餐详情页的套餐
  if (shoppingCartStore.shoppingCartInfo.length > 0) {
    const goodsItem = shoppingCartStore.shoppingCartInfo.filter((i) => {
      if (i.packageId === data.value.comboId) return i // 是的话返回当前套餐的信息
    })
    // 修改当前套餐的信息
    goodsItem.length > 0 ? (data.value.stocks = goodsItem[0].inventory - goodsItem[0].count) : null
  }
  // console.log(data.value)
})

// 返回进入之前的页面
const backIcon = () => {
  uni.navigateBack()
}

// 按钮变色
const memberStore = useMemberStore()
const dishesNumber = ref(1)
const add = async (e: number) => {
  // 1 代表是点击加号
  if (e === 1) {
    console.log(data.value?.stocks)
    if (dishesNumber.value >= data.value?.stocks) return // dishesNumber 大于等于库存 的时候，再点击就 return 出去
    dishesNumber.value++
  } else {
    if (dishesNumber.value <= 1) return // 当数量等于小于 1 的时候就不触发
    dishesNumber.value--
  }
}

/** 点击加入购物车，保存到本地 */
const addToCart = () => {
  let obj = {
    packageId: data.value.comboId,
    count: dishesNumber.value,
    packageName: data.value?.appletComboInfoDto!.comboName,
    thumbUrl: data.value?.appletComboInfoDto!.thumbUrl,
    applietAmount: data.value?.appletComboInfoDto!.marketing.applietAmount,
    deviceAmount: data.value?.appletComboInfoDto!.marketing.deviceAmount,
    inventory: data.value?.stocks,
    discountedAfterPrice: data.value?.appletComboInfoDto!.marketing.discountedAfterPrice,
    spicy: data.value?.appletComboInfoDto.tastes?.spicy,
  }
  console.log('obj', obj)
  shoppingCartStore.setShoppingCartInfo(obj) // 存到本地
  uni.switchTab({ url: '/pages/eat/eat' })
}
</script>

<template>
  <view class="detailsPage">
    <!-- 返回按钮 -->
    <view
      @tap="backIcon"
      class="back iconfont icon_base_left"
      :style="{ top: phoneStore.phoneInfo?.top + 'px' }"
    ></view>
    <!-- 背景图 -->
    <view class="bgcImage">
      <BjsSwiper :list="data?.appletComboInfoDto?.comboDetailData" :flag="false" />
    </view>
    <!-- 套餐描述 -->
    <view class="describe">
      <view class="name">{{ data?.appletComboInfoDto?.comboName }}</view>
      <!-- <view class="ingredient" v-if="false">营养成分表（每份）： {{ nutrition  }}</view> -->
      <view class="show">已包含</view>
      <view class="show_image">
        <view class="image_item">
          <view class="itemImage">
            <image class="img" :src="data?.appletComboInfoDto?.thumbUrl" mode="scaleToFill" />
          </view>
          <view class="itemImageName">{{ data?.appletComboInfoDto.comboName }}</view>
        </view>
        <!-- <view class="image_item">
          <image
            class="image"
            src=""
            mode="scaleToFill"
          />餐具
        </view> -->
      </view>
    </view>
    <!-- 套餐介绍图 -->
    <image
      class="introduceImage"
      v-if="data?.appletComboInfoDto?.comboInfoImg"
      :src="data?.appletComboInfoDto?.comboInfoImg"
      mode="widthFix"
    />
    <!-- bottom定位 -->
    <view class="position">
      <view class="number">
        <text class="discountPrice" v-if="data?.appletComboInfoDto.marketing.clientCouponId"
          >￥{{ Number(data?.appletComboInfoDto.marketing.discountedAfterPrice).toFixed(2) }}
          预估到手
        </text>
        <text class="originalPrice"
          >￥{{ Number(data?.appletComboInfoDto.marketing.applietAmount).toFixed(2) }}
        </text>
        <text
          class="type"
          :class="{
            timeLimit: data?.appletComboInfoDto.tagComboList
              ? data?.appletComboInfoDto.tagComboList[0]?.tagName === '限时'
              : '',
            Hot: data?.appletComboInfoDto.tagComboList
              ? data?.appletComboInfoDto.tagComboList[0]?.tagName === '热销'
              : '',
          }"
          >{{
            data?.appletComboInfoDto.tagComboList
              ? data?.appletComboInfoDto.tagComboList[0]?.tagName
              : '推荐'
          }}</text
        >
        <text class="residue" v-if="data?.stocks <= 3 && data?.stocks > 0"
          >仅剩{{ data?.stocks }}份</text
        >
        <view class="_button">
          <text
            @tap="add(0)"
            class="iconfont icon_reduce"
            :class="{ active: dishesNumber <= 1 }"
          ></text>
          <text class="">{{ dishesNumber }}</text>
          <text
            @tap="add(1)"
            class="iconfont icon_add"
            :class="{ active: dishesNumber >= data?.stocks }"
          ></text>
        </view>
      </view>
      <view class="title">已选：{{ data?.appletComboInfoDto.comboName }} | 餐具</view>
      <button class="addButton" :disabled="data?.stocks <= 0 ? true : false" @tap="addToCart()">
        加入购物车
      </button>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #fff;
}
// 返回按钮 icon
.back {
  position: fixed;
  left: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64rpx;
  height: 64rpx;
  font-size: 32rpx;
  border-radius: 50%;
  color: #000000e5;
  background-color: #fff;
  z-index: 9;
}
// 背景图高度
.bgcImage {
  height: 440rpx;
}
// 套餐描述
.describe {
  width: 100%;
  padding: 40rpx 32rpx 20rpx;
  .name {
    font-size: 34rpx;
    color: #000000e5;
  }
  .ingredient {
    margin: 24rpx 0 44rpx 0;
    font-size: 24rpx;
    color: #00000080;
  }
  .show {
    font-size: 28rpx;
    color: #000000e5;
    margin: 20rpx 0;
  }
  .show_image {
    display: flex;
    width: 100%;
    .image_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20rpx;
      margin-right: 24rpx;
      width: 216rpx;
      height: 280rpx;
      font-size: 24rpx;
      border-radius: 16rpx;
      background: #f6f6f6;
      .image {
        // margin-bottom: 12rpx;
        width: 176rpx;
        height: 176rpx;
        border-radius: 8rpx;
        background: #d9d9d9;
      }
      .itemImage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-image: url('/static/images/eat_food_bg.png');
        background-size: cover; /* 设置背景图大小适应容器 */
        background-position: center; /* 设置背景图位置居中 */
        // margin-bottom: 12rpx;
        width: 176rpx;
        height: 176rpx;
        border-radius: 8rpx;
        .img {
          // margin-top: 60rpx;m
          width: 176rpx;
          height: 176rpx;
          border-radius: 8rpx;
        }
      }
      .itemImageName {
        width: 216rpx;
        text-align: center;
      }
    }
  }
}
// 套餐介绍图
.introduceImage {
  width: 750rpx;
  min-height: 8000rpx;
  padding-bottom: 300rpx;
}
// 定位
.position {
  position: fixed;
  bottom: 0rpx;
  padding: 28rpx 24rpx 0;
  width: 100%;
  height: 295rpx;
  border-top: 1px solid #0000004d;
  background-color: #fff;
}
.number {
  position: relative;
  width: 702rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  .discountPrice {
    font-family: 'Rowdies';
    font-size: 32rpx;
    color: #f14b4b;
    font-weight: 600;
  }
  .originalPrice {
    margin: 0 16rpx 0 8rpx;
    font-size: 32rpx;
    color: #000;
  }
  .type {
    padding: 4rpx;
    font-size: 20rpx;
    color: $uni-color-motif;
    border-radius: 6rpx;
    background-color: #f1ffee;
  }
  .timeLimit {
    color: #e14949;
    background-color: #fff6f6;
  }
  .Hot {
    color: #ff9c09;
    background-color: #fff5e5;
  }
  .residue {
    margin-left: 8rpx;
    text-align: center;
    padding: 0 10rpx;
    font-size: 20rpx;
    color: #8d6b25;
    border-radius: 6rpx;
    border: 1px solid #8d6b25;
  }
  ._button {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 146rpx;
    font-size: 28rpx;
    .iconfont {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box; // 控制边框不超出盒子大小
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
    }
    .icon_reduce {
      color: $uni-color-motif;
      border: 4rpx solid $uni-color-motif;
      background-color: #fff;
    }
    .icon_add {
      color: #fff;
      background-color: $uni-color-motif;
    }
    .active {
      color: #fff;
      border: 4rpx solid #ccc;
      background-color: #ccc;
    }
  }
}
.title {
  margin: 8rpx 0 30rpx 0;
  font-size: 22rpx;
  color: #00000080;
}
.addButton {
  width: 702rpx;
  height: 76rpx;
  line-height: 76rpx;
  color: #fff;
  border-radius: 44rpx;
  font-size: 26rpx;
  background-color: $uni-color-motif;
}
</style>
